import './theme.scss'

const icons = {
  'left-layout': '<span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icons"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg></span>',
  fullscreen: '<span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icons"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"></path></svg></span>',
  'fullscreen-exit': '<span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icons"><path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"></path></svg></span>',
  help: '<span role="img"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icons mr-2"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>',
}

const createButtonDOM = text => `<button type="button" role="button" aria-label="Button" tabindex="0">${text}</button>`

$(document).ready(() => {
  // HeaderMenu
  tippy(document.querySelectorAll('#navList > li > a'), {
    theme: 'tooltip',
    animation: 'shift-away',
    arrow: false,
    content(reference) {
      const text = reference.innerHTML.trim()
      return text
    },
  })

  // Footer
  const $footer = $('#footer')
  $footer.children('br').remove()
  // $footer.html(`<div class="flex">${createButtonDOM(icons['left-layout'])}${createButtonDOM(icons.fullscreen)}<span>${$footer.html()}</span></div>`)
  // $footer.append(`<div class="flex">${createButtonDOM(`${icons.help}帮助与反馈`)}</div>`)
})
